<template>
  <div class="container">
    <el-row type="flex" justify="center">
      <el-col :span="24">
        <el-card class="box-card">

          <div>
            <span class="title">学科名称</span>&nbsp;&nbsp;<el-input v-model="input" class="biaodan" ref="input"></el-input>
            &nbsp;&nbsp;<el-button class="moren" @click=clearInput()>清除</el-button>
            <el-button type="primary" class="moren" @click=search>搜索</el-button>
            <el-button type="success" class="moren2" @click="addRole"><i class="el-icon-edit"></i>新增学科</el-button>
          </div>
          <div class="huide">
            <i class="el-icon-warning">&nbsp;一共有{{ total }}条数据</i>
          </div>
          <el-table :data="list" style="width: 100%">
            <el-table-column type="index" label="序号" width="80">
              <!--  <div slot-scope="scope">
                {{ scope.row.it}
               通用作用域插槽写法，scope.row
              </div> -->
            </el-table-column>
            <el-table-column prop="subjectName" label="学科名称" width="100">
            </el-table-column>
            <el-table-column label="创建日期" width="210">
              <div slot-scope="scope">
                {{ fn(scope.row.addDate) }}
                <!-- 通用作用域插槽写法，scope.row -->
              </div>
            </el-table-column>
            <el-table-column prop="username" label="创建者" width="120">
            </el-table-column>
            <el-table-column label="前台显示" width="80">
              <div slot-scope="scope">
                {{ scope.row.isFrontDisplay === 1 ? '是' : '否' }}
                <!-- 通用作用域插槽写法，scope.row -->
              </div>
            </el-table-column>
            <el-table-column prop="twoLevelDirectory" label="二级目录" width="80">
            </el-table-column>
            <el-table-column prop="tags" label="标签" width="50">
            </el-table-column>
            <el-table-column prop="totals" label="题目数量" width="80">
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template v-slot="{ row }">
                <router-link to="/subjects/directorys"><el-button type="text">学科分类</el-button></router-link>
                <router-link to="/subjects/tags"> <el-button type="text">学科标签</el-button></router-link>
                <el-button type="text" @click="updateRole(row)">编辑</el-button>
                <el-button type="text" @click="deleteRole(row)">删除</el-button>
              </template>

              <!--  <el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
            </el-table-column>
          </el-table>
          <div>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
              :page-sizes="[5, 8, 10, 15]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
              :total="total">
            </el-pagination>
          </div>
          <!-- 弹出框组件 -->
          <addDialog ref="addRef" @ADD_ROLE_SUCCESS="getList" />
          <updateDialog ref="updateRef" @UPDATE_ROLE_SUCCESS="getList" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { list, remove } from '@/api/hmmm/subjects.js'
import addDialog from './shikou/addDialog.vue'
import updateDialog from './shikou/updateDialog.vue'
export default {
  components: { addDialog, updateDialog },
  data() {
    return {
      total: 0,
      input: '',
      list: [],
      page: 1,
      pagesize: 5
    }
  },
  created() {
    this.getList()
  },

  methods: {
    async getList() {
      const res = await list({ page: this.page, pagesize: this.pagesize })
      this.total = res.data.counts
      this.list = res.data.items
    },
    clearInput() { // 清空搜索框表单内容
      this.$refs.input.clear()
    },
    handleSizeChange(value) {
      this.pagesize = value
      this.getList()
    },
    handleCurrentChange(value) {
      this.page = value
      this.getList()
    },
    addRole() {
      this.$refs.addRef.openDialog()
    },
    updateRole(row) {
      this.$refs.updateRef.openDialog(row)
    },
    deleteRole(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(id)
        await remove(id)
        this.getList()
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      })
    },
    search() {
      this.getList()
      this.clearInput()
    },
    fn(value) {
      var reg = /[a-zA-Z]*/
      var result = value.replace(reg, '')
      var last = result.slice(0, result.length - 5)
      var n = last.replace(/T/g, " ")
      return (n)
    }
  }
}
</script>

<style scoped lang='less'></style>
<style scoped>
.title {
  font-weight: bold;
  font-size: 16px !important;
}

.biaodan {
  width: 200px;
}

.moren {
  width: 80px;
  padding-right: 10px;
  padding-left: 10px;
}

.moren2 {
  width: 90px;
  padding-right: 10px;
  padding-left: 10px;
  float: right;
}

.huide {
  background-color: #eeeeee;
  height: 30px;
  width: 100%;
  margin-left: 8px;
  margin-top: 15px;
  line-height: 30px;
  padding-left: 20px;
  color: #929292;
}

tr {
  display: flex;
  justify-content: space-between;
}
</style>
